import React, { useState, useEffect } from 'react'
import { Table, Button, Modal, Tree } from 'antd'
import axios from 'axios'
import { DeleteOutlined, UnorderedListOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
const { confirm } = Modal;
export default function RoleList() {
    const [dataSource, setDataSource] = useState([])
    const [rightList, setRightList] = useState([])
    const [currentRights, setCurrentRights] = useState([])
    const [isModalVisible, setIsModalVisible] = useState(false)
    const [currentId,setCurrentId]=useState(0)

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            render: (id) => {
                return (<b>{id}</b>)
            }

        },
        {
            title: '角色名称',
            dataIndex: 'roleName',
            // render: (id) => {
            //     return (<b>{id}</b>)
            //     }

        },
        {
            title: '操作',
            render: (item) => {
                return (
                    <div>
                        <Button type="primary" shape="circle" icon={<UnorderedListOutlined />} onClick={()=>showModal(item)} />
                        <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => confirmMethod(item)} />
                        <Modal title="权限分配" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                            <Tree
                                checkable
                                checkStrictly={true}
                               checkedKeys={currentRights}
                               onCheck={onCheck}
                                treeData={rightList}
                            />
                        </Modal>
                    </div>
                )
            }

        },

    ]
    useEffect(() => {
        axios.get("/roles").then(res => {
            setDataSource(res.data)

        })

    }, [])
    useEffect(() => {
        axios.get("/rights?_embed=children").then(res => {
            setRightList(res.data)
        })
    }, [])

    const confirmMethod = (item) => {
        confirm({
            title: '确定要删除吗?',
            icon: <ExclamationCircleOutlined />,

            onOk() {
                deleteMethod(item)
            },
            onCancel() {

            },
        });

    }
    const deleteMethod = (item) => {
        //当前页面同步+后端数据同步删除

        setDataSource(dataSource.filter(data => data.id !== item.id))
        axios.delete(`/roles/${item.id}`)


    }
    const showModal = (item) => {
        setIsModalVisible(true);
        setCurrentRights(item.rights)
        setCurrentId(item.id)
    };
    const handleOk = () => {
        setIsModalVisible(false);
        setDataSource(dataSource.map(item=>{
            if(item.id===currentId){
                return{
                ...item,
                rights:currentRights
            }
        }
                
                    return item
                    
                
            
        }))
        axios.patch(`/roles/${currentId}`,{
            rights:currentRights
        })
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };
   
     
        const onCheck = (checkedKeys) => {
            setCurrentRights(checkedKeys.checked)
            
        };

    
        return (
            <div>
                <Table dataSource={dataSource} columns={columns} rowKey={(item) => item.id}></Table>
            </div>
        )
    }
